<template>
  <div class="user_page">
    <div class="user_info_wrap">
      <!-- 登录前显示 -->
      <div class="login" v-if="!userInfo.nickName" @click="getUserInfo">
        <div>登录</div>
      </div>
      <!-- 登录后显示 -->
      <div class="user_img_wrap" v-else>
        <!-- 退出按钮 -->
        <van-button class="exit" @click="exit">退出</van-button>
        <!-- 背景 -->
        <img class="img_bg" :src="userInfo.avatarUrl" />
        <!-- 用户信息 -->
        <div class="user_info">
          <img class="user_icon" :src="userInfo.avatarUrl" />
          <div class="user_name">{{userInfo.nickName}}</div>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="user_content">
      <div class="user_main">
        <!-- 1tabs -->
        <div class="his_wrap">
          <router-link class="user_goods" to="/collect">
            <div class="his_num">{{collectNum}}</div>
            <div class="his_name">商品关注</div>
          </router-link>
          <a class="user_follow">
            <div class="his_num">0</div>
            <div class="his_name">店铺关注</div>
          </a>
          <a class="user_like">
            <div class="his_num">0</div>
            <div class="his_name">喜欢</div>
          </a>
          <a class="user_history">
            <div class="his_num">0</div>
            <div class="his_name">足迹</div>
          </a>
        </div>
        <!-- 2我的订单 -->
        <div class="user_order">
          <div class="order_title">我的订单</div>
          <div class="order_tabs_wrap">
            <router-link to="/order?type=1">
              <div class="iconfont icon-ding_dan"></div>
              <div class="text">全部订单</div>
            </router-link>
            <router-link to="/order?type=2">
              <div class="iconfont icon-fukuantongzhi"></div>
              <div class="text">待付款</div>
            </router-link>
            <router-link to="/order?type=3">
              <div class="iconfont icon-receipt-address"></div>
              <div class="text">待收货</div>
            </router-link>
            <router-link to="/order?type=4">
              <div class="iconfont icon-receipt-address"></div>
              <div class="text">退货/退款</div>
            </router-link>
          </div>
        </div>
        <!-- 3收货地址管理 -->
        <div class="address">收货地址管理</div>
        <!-- 4反馈 -->
        <div class="feedback_wrap">
          <!-- 联系客服 -->
          <div class="feedback_item">
            <span>联系客服</span>
            <span>400-618-4000</span>
          </div>
          <!-- 意见反馈 -->
          <div class="feedback_item">
            <router-link to="/feedback">意见反馈</router-link>
          </div>
          <!-- 关于我们 -->
          <div class="feedback_item">
            <div>关于我们</div>
          </div>
        </div>
        <!-- 5推荐 -->
        <div class="recommend">推荐给其他人</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      collectNum: 0
    }
  },
  methods: {
    getUserInfo() {
      this.userInfo = {
        nickName: 'zhangsan',
        avatarUrl:
          'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTInR3fXGE8zglgxNkWx3IlBpgkuFzLnByEdWzDIEsxEWWvrOqJwzUk85ZFQ8HrAMuOadAZvoqAvqQ/132'
      }
      sessionStorage.setItem('userInfo', JSON.stringify(this.userInfo))
    },
    exit() {
      this.userInfo = {}
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo')) || {}
    const collectList = JSON.parse(localStorage.getItem('collectList')) || []
    this.collectNum = collectList.length
  }
}
</script>

<style lang='less' scope>
a {
  color: #666;
}
// 包裹器
.user_info_wrap {
  position: relative;
  height: 45vh;
  background-color: var(--themeColor);
  overflow: hidden;
  // 登录
  .login {
    position: absolute;
    // 定位
    left: 50%;
    top: 40%;
    transform: translate(-50%);
    border: 1px solid greenyellow;
    font-size: 19px;
    padding: 15px;
    color: #fff;
    border-radius: 5px;
  }

  .user_img_wrap {
    position: relative;
    .exit {
      position: absolute;
      font-size: 12px;
      line-height: 25px;
      margin: 0;
      padding: 0;
      width: 50px;
      height: 25px;
      right: 10px;
      top: 10px;
      z-index: 66;
    }
    // 背景
    .img_bg {
      width: 100%;
      height: 50vh;
      filter: blur(5px);
    }

    // 信息
    .user_info {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      top: 20%;
      text-align: center;

      // 头像
      .user_icon {
        width: 75px;
        height: 75px;
        border-radius: 50%;
      }

      .user_name {
        color: #fff;
        margin-top: 20px;
      }
    }
  }
}
// 主体内容
.user_content {
  position: relative;
  color: #666;
  .user_main {
    width: 90%;
    position: absolute;
    left: 50%;
    top: -20px;
    padding-bottom: 50px;
    transform: translate(-50%);

    .his_wrap {
      display: flex;
      background-color: #fff;
      text-align: center;
      padding: 5px 0;

      > a {
        flex: 1;

        .his_num {
          color: var(--themeColor);
        }
      }
    }
  }

  .user_order {
    margin-top: 15px;

    .order_title {
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      padding: 10px;
    }

    .order_tabs_wrap {
      display: flex;
      background-color: #fff;
      text-align: center;
      padding: 5px 0;

      > a {
        flex: 1;

        .iconfont {
          color: var(--themeColor);
        }
      }
    }
  }

  // 收货地址
  .address {
    background-color: #fff;
    margin-top: 15px;
    padding: 10px;
    text-align: left;
  }

  // 反馈
  .feedback_wrap {
    background-color: #fff;
    margin-top: 15px;
    // padding: 10px;
    width: 100%;

    // 联系客服 意见 关于我们
    .feedback_item {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
    }
  }
  // 推荐
  .recommend {
    background-color: #fff;
    padding: 10px;
    margin-top: 15px;
  }
}
</style>
